<template>
    <div class="item">
        <div class="item-header">
            <p>报警类型分布</p>
            <img src="../img/title_bor.png" alt="">
        </div>
        <div class="item-chart" id="alarmType" style="pointer-events: none"></div>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data() {
          return{
              chart: null,
              index: 0,
              time: null,
          }
        },
        mounted() {
            let option = {
                animationDuration: 2000,
                tooltip: {
                    show: false
                },
                legend: {
                    show:false,
                },
                grid: {
                    top: '15px',
                    left: '15px',
                    right: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                color: ['#0873ff', '#3cabfe', '#2383ff', '#a3f6ff'],
                series: [
                    {
                        name: '报警类型分布',
                        type: 'pie',
                        radius: ['68%', '80%'],
                        selectedMode: "single",
                        animationType: "scale",
                        animationDuration: 3000,
                        animationTypeUpdate: "transition",
                        legendHoverLink: true,
                        hoverAnimation: true,
                        hoverOffset: 10,
                        selectedOffset: 5,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 234, name: 'SOS'},
                            {value: 135, name: '围栏'},
                            {value: 335, name: '心率'},
                            {value: 310, name: '血压'},
                        ]
                    }
                ]
            };
            this.chart = this.$echarts.init(document.getElementById('alarmType'));
            this.chart.setOption(option);
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
            let myChart =this.chart; //解决echarts中this指向问题
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0
            });
            myChart.dispatchAction({
                type: 'pieSelect',
                seriesIndex: 0,
                dataIndex: this.index
            });
            this.time = setInterval(() => {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                myChart.dispatchAction({
                    type: 'pieUnSelect',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.index += 1;
                if (this.index > 3) {
                    this.index = 0
                }
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                myChart.dispatchAction({
                    type: 'pieSelect',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
            }, 3000)
        }
    }
</script>

<style scoped lang="less">
    @import "index";
</style>
